<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">宝贝</block></cu-custom>
		<view class="flex align-end">
			<view v-for="(item,index) in menulist" :key="index" 
				class="padding-sm margin-left-sm"
				:class="active===index?'text-theme text-lg text-fw600':'text-df text-333'" @tap="handleMenu(index)">
				{{item.name}}
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" top="30" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<!-- <GoodsCard :productList="goodsList" ></GoodsCard> -->
			<view class="goods-list" v-if="goodsList">
				<view class="product-list" v-if="goodsList">
					<view
						class="product"
						v-for="product in goodsList"
						:key="product.goods_id"
					>
						<image mode="widthFix" :src="product.goods_img" @tap="goodsDetail(product)"></image>
						<view class="name">{{ product.goods_name }}</view>
						<view class="info">
							<view class="price">￥{{ product.goods_price | formatPrice }}</view>
							<view class="slogan" @tap="sendMsg(product)">发送</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import * as Goods_API from '@/api/goods.js'
	import * as Cart_API from '@/api/cart.js'
	import * as User_API from '@/api/user.js'
	import GoodsCard from '@/components/chat/GoodsCard.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		components:{
			GoodsCard,
		},
		data() {
			return {
				menulist:[
					{name:'收藏'}
					// {name:'购物车'}
				],
				params:{
					page_no:1,
					page_size:20,
					seller_id:uni.getStorageSync('shop').shop_id 
				},
				sellerId:uni.getStorageSync('shop').shop_id,
				active:0,
				goodsList:[],
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, 
					noMoreSize: 10, //列表的总数量要大于半页才显示无更多数据;默认5
					empty:{
						icon:'../../../static/images/empty/empty_collection.png',
						tip: '没找到商品 '
					}
				},
			};
		},
		methods:{
			handleMenu(index){
				this.active = index
				this.params.page_no =1 
				this.upCallback()
			},
			updateList(){
				this.params.page_no =1 
			},
			downCallback() {
				this.params.page_no = 1
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.GET_GoodsList()
			},
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			GET_GoodsList(){
				if(this.active==1){
					Cart_API.GetAllCart({sellerId:this.params.seller_id}).then(res =>{
						console.log(res.cart_list.length)
						this.mescroll.endSuccess(res.cart_list.length)
						if(this.params.page_no ==1) this.goodsList = []
						this.goodsList = res.cart_list
						// this.params.page_no+=1
					}).catch(()=>{
						this.mescroll.endErr();
					})
				}else{
					User_API.getCollectionList(this.params).then(res =>{
						this.mescroll.endSuccess(res.data.length)
						if(this.params.page_no ==1) this.goodsList = []
						this.goodsList = this.goodsList.concat(res.data)
						this.params.page_no+=1
					}).catch(()=>{
						this.mescroll.endErr();
					})
				}
				
			},
			sendMsg(e){
				uni.setStorage({
					key:'customerServiceInfo',
					data:{
						goods:{
							goods_id:e.goods_id,
							goods_image:e.goods_img,
							goods_name:e.goods_name,
							goods_price:e.goods_price
						}
					},
					success: () => {
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
.goods-list {
	background-color: transparent;
	padding-top:20rpx;
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		color: #f47825;
		font-size: 30upx;
		margin-top: 10upx;
		image {
			width: 30upx;
			height: 30upx;
		}
	}
	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.product-list {
		flex:1;
		width: 100%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 30upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			image {
				width: 100%;
				height: 300upx;
				min-height: 300upx;
				border-radius: 20upx 20upx 0 0;
			}
			.name {
				width: 100%;
				padding: 5upx 4% 10upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 28rpx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 96%;
				padding: 10upx;
				.price {
					color: $simba-moeny-yellow;
					font-size: 26upx;
					font-weight: 600;
				}
				.slogan {
					color: $color-main;
					font-size: 26upx;
					padding:5rpx 30rpx;
					border:1px solid $color-main;
					border-radius: 12rpx;
				}
			}
		}
	}
}
.card-category{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #FFF;
	height: 80upx;
	padding: 0 30upx;
	margin-bottom: 30upx;
	span{
		color: #333;
		font-size: 32upx;
		font-weight: 600;
	}
	p{
		color: #666;
		font-size:26upx;
	}
}
</style>
